<template>
  <a-layout>
    <!-- <div class="head">
      <div class="operation">
        <a-input-search allow-clear class="mr12" placeholder="姓名/手机号/身份证号" style="width: 180px" @search="inputChange" />
        <a-select style="width: 180px" @change="handleChange" allowClear placeholder="员工状态">
          <a-select-option value="1">
            待入职
          </a-select-option>
          <a-select-option value="2">
            在职
          </a-select-option>
          <a-select-option value="3">
            待离职
          </a-select-option>
          <a-select-option value="4">
            离职
          </a-select-option>
        </a-select>
      </div>
      <div>
        <a-button style="margin-right:10px" :disabled="!selectedRowKeys.length" @click="() => download(1)">
          批量导出
        </a-button>
        <a-button type="primary" :disabled="!dataList || !dataList.length" style="margin-right:10px" @click="() => download(2)">
          全部导出
        </a-button>
      </div>
    </div> -->
    <div class="tableBox">
      <TableBody
        selectHead
        selection
        tableName="declareWage"
        :selectedRowKeys.sync="selectedRowKeys"
        :source="dataList"
        :headerRowID="'sortable_list_declareWage'"
        :columns="columns"
        @onReload="getWagesList"
        @onExport="() => download(1)"
        @onExportAll="() => download(2)"
      >
        <template slot="search">
          <a-input-search allow-clear placeholder="姓名/手机号/身份证号" style="width: 180px" v-model="search1" @search="inputChange" />
          <a-select style="width: 180px" v-model="search2" @change="handleChange" allowClear placeholder="员工状态">
            <a-select-option value="1">
              待入职
            </a-select-option>
            <a-select-option value="2">
              在职
            </a-select-option>
            <a-select-option value="3">
              待离职
            </a-select-option>
            <a-select-option value="4">
              离职
            </a-select-option>
          </a-select>
        </template>
        <template slot-scope="prop">
          <a-table
            :class="prop.className"
            :components="prop.components"
            :columns="prop.columns"
            :scroll="{ x: prop.scrollWidth }"
            :customHeaderRow="
              () => {
                return {
                  domProps: {
                    id: prop.headerRowID
                  }
                };
              }
            "
            :loading="loading"
            :data-source="dataList"
            :pagination="pagination"
            @change="handleTableChange"
            :row-selection="{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange
            }"
          >
            <a slot="empName" style="position:relative;cursor: default;" slot-scope="text, record">
              <img :src="abolitionImg" v-if="record.status === 4" style="position:absolute;top:-16px;left:-15px;width:50px;height:50px" />
              <p style="margin-left:20px;margin-bottom:0;color:#595959">
                {{ text }}
              </p>
            </a>
            <a slot="gender" slot-scope="text">
              <span v-if="text === 1">男</span>
              <span v-if="text === 2">女</span>
            </a>
            <a slot="birthday" slot-scope="text">
              {{ text ? moment(parseInt(text)).format("YYYY-MM-DD") : null }}
            </a>

            <a slot="certificateType" slot-scope="text" style="cursor:pointer;color:#595959">
              {{ certificate[parseInt(text)] }}
            </a>
          </a-table>
        </template>
      </TableBody>
    </div>
  </a-layout>
</template>
<script>
const columns = [
  {
    title: "姓名",
    dataIndex: "empName",
    key: "empName",
    fixed: "left",
    width: 170,
    colDefault: true,
    isEdit: false,
    scopedSlots: { customRender: "empName" }
  },
  {
    title: "证件类型",
    dataIndex: "certificateType",
    key: "certificateType",
    width: 150,
    colDefault: true,
    isEdit: false,
    scopedSlots: { customRender: "certificateType" }
  },
  {
    title: "证件号码",
    dataIndex: "idCard",
    key: "idCard",
    colDefault: true,
    isEdit: false,
    width: 180
  },
  {
    title: "本期收入",
    dataIndex: "income",
    key: "income",
    colDefault: true,
    width: 100
  },
  {
    title: "本期免税收入",
    dataIndex: "noTaxIncome",
    key: "noTaxIncome",
    colDefault: true,
    width: 150
  },
  {
    title: "基本养老保险费",
    dataIndex: "basicPensionInsurancePremium",
    key: "basicPensionInsurancePremium",
    colDefault: true,
    width: 150
  },
  {
    title: "基本医疗保险费",
    dataIndex: "basicMedicalInsurancePremium",
    key: "basicMedicalInsurancePremium",
    colDefault: true,
    width: 150
  },
  {
    title: "失业保险费",
    dataIndex: "unemploymentInsurancePremium",
    key: "unemploymentInsurancePremium",
    colDefault: true,
    width: 150
  },
  {
    title: "住房公积金",
    dataIndex: "housingFund",
    key: "housingFund",
    colDefault: true,
    width: 150
  },
  {
    title: "累计子女教育",
    dataIndex: "cumulativeChildEducation",
    key: "cumulativeChildEducation",
    colDefault: true,
    width: 150
  },
  {
    title: "累计继续教育 ",
    dataIndex: "cumulativeContinuingEducation",
    key: "cumulativeContinuingEducation",
    colDefault: true,
    width: 150
  },
  {
    title: "累计住房贷款利息",
    dataIndex: "accumulatedHousingLoanInterest",
    key: "accumulatedHousingLoanInterest",
    colDefault: true,
    width: 150
  },
  {
    title: "累计住房租金",
    dataIndex: "cumulativeHousingRent",
    key: "cumulativeHousingRent",
    colDefault: true,
    width: 150
  },
  {
    title: "累计赡养老人",
    dataIndex: "accumulatedSupportForTheElderly",
    key: "accumulatedSupportForTheElderly",
    colDefault: true,
    width: 150
  },
  {
    title: "企业(职业)年金",
    dataIndex: "enterpriseOccupationalAnnuity",
    key: "enterpriseOccupationalAnnuity",
    colDefault: true,
    width: 150
  },
  {
    title: " 商业健康保险",
    dataIndex: "commercialHealthInsurance",
    key: "commercialHealthInsurance",
    colDefault: true,
    width: 150
  },
  {
    title: "税延养老保险",
    dataIndex: "taxDeferredPensionInsurance",
    key: "taxDeferredPensionInsurance",
    colDefault: true,
    width: 150
  },
  {
    title: " 其他",
    dataIndex: "other",
    key: "other",
    colDefault: true,
    width: 100
  },
  {
    title: "准予扣除的捐赠额  ",
    dataIndex: "allowableDeductionOfDonations",
    key: "allowableDeductionOfDonations",
    colDefault: true,
    width: 150
  },
  {
    title: "减免税额",
    dataIndex: "taxDeduction",
    key: "taxDeduction",
    colDefault: true,
    width: 100
  },
  {
    title: "备注",
    dataIndex: "remark",
    key: "remark",
    colDefault: true,
    width: 100
  }
];
const certificate = [
  "中国护照",
  "居民身份证",
  "港澳居民来往内地通行证",
  "台湾居民来往大陆通行证",
  "外国护照",
  "中华人民共和国港澳居民居住证",
  "中华人民共和国台湾居民居住证",
  "外国人永久居留身份证",
  "中华人民共和国外国人工作许可证（A类）",
  "中华人民共和国外国人工作许可证（B类）",
  "中华人民共和国外国人工作许可证（C类）",
  "其他个人证件"
];
import { getWages } from "@/api/tax/tax";
import moment from "moment";
import ExportMixin from "xqjr-plugin-common/UploadOrExport/exportMixin";
const mixin = new ExportMixin();
export default {
  mixins: [mixin],

  data() {
    return {
      abolitionImg: require("@/assets/home/lizhi.png"),
      certificate,
      inputName: null,
      empIdList: [],
      loading: false,
      selectedRowKeys: [],
      selectRowKey: [],
      dataList: [],
      columns,
      groupList: [],
      empStatus: undefined,
      companyId: this.$store.state.hr.companyId,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: total => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100"]
      },
      search1: "",
      search2: undefined
    };
  },

  created() {
    this.getWagesList();
  },

  beforeDestory() {},
  methods: {
    handleChange(e) {
      this.pagination.current = 1;
      this.pagination.pageSize = 10;
      this.empStatus = e;
      this.getWagesList();
    },
    onSelectChange(selectedRowKeys, e) {
      this.empIdList = [];
      this.selectedRowKeys = selectedRowKeys;
      e.forEach((item, index) => {
        this.empIdList.push(item.empId);
      });
    },
    download(i) {
      const token = this.$store.state.auth.token;
      if (i === 2) {
        this.exportData = {
          companyId: this.companyId,
          empIdList: [],
          status: this.empStatus ? this.empStatus : undefined,
          nameOrPhoneOrIdCard: this.inputName ? this.inputName : undefined
        };
      } else {
        this.exportData = {
          companyId: this.companyId,
          empIdList: this.empIdList
        };
      }

      this.url = `/salary/api/v1/specialAdditionalDetails/exportNormalSalary`;
      this.excelName = `${this.$store.state.hr.companyName}_` + "正常工资薪金申报导出详情" + ".xlsx";
      this.postDownload();
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getWagesList();
    },
    getWagesList() {
      this.loading = true;
      getWages({
        status: this.empStatus,
        name: this.inputName,
        companyId: this.companyId,
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize,
        "orders[0].property": "status",
        "orders[0].desc": true
      }).then(res => {
        this.selectedRowKeys = [];
        this.loading = false;
        this.dataList = res.data.entities || [];
        this.pagination.total = res.data && res.data.entityCount;
      });
    },
    inputChange(e) {
      this.inputName = e;
      this.pagination.current = 1;
      this.pagination.pageSize = 10;
      this.getWagesList();
    }
  }
};
</script>
<style lang="scss" scoped>
$body-width: calc(100% - 338px);
.head {
  // padding: 20px;
  padding-bottom: 0;
  width: 100%;
  display: flex;
  text-align: center;
  line-height: 60px;
  justify-content: space-between;
  .anticon-left {
    color: #595959;
    font-size: 20px;
    margin-top: 18px;
  }
  .left2 {
    z-index: 3;
    left: 65px;
    position: absolute;
    color: #595959;
    font-size: 16px;
    margin-top: -3px;
  }
}
</style>
